import React,{useState, useEffect} from 'react'

// hooks的说明https://react.docschina.org/docs/hooks-overview.html
export default function HooksCount() { // 可以通过接收props参数达到class那种完全受控函数

    // 把useState解构，（useState 包含两个对象，一个值，一个方法，解构成任何自定义变量，可以结构成多个
    // 等价https://react.docschina.org/docs/hooks-state.html
    const [currState,setChangeStateFn] = useState(0)

    // 相当于 componentDidMount 和 componentDidUpdate:
    useEffect(() => {
        console.log("我是函数式组件Hooks的回调执行，在useState设定完处理（相当于class组件的挂载完成和更新完成的生命周期")
        // 使用原生js需要这样使用
        document.title = `当前Hooks修改操作的状态值为${currState}`
    })



    return (
        <div>
            <p>当前数量为{currState}</p>
            <button onClick={() => { setChangeStateFn(currState - 1) }}>-</button>
            <span>{currState}</span>
            <button onClick={() => { setChangeStateFn(currState + 1) }}>+</button>
        </div>
    )
}
